import React from "react";
import {Form as AntdForm, DatePicker} from 'antd';
import {VJsonComponent} from "../../factory";
import {YvanEvent} from "../../types";
import {apply, YvanEventBind, YvanEventDispatch} from "../../utils/helper";
import {FormItemBaseState, FormItemBaseProp, VJsonFormItemBase} from "./VJsonFormItemBase";
import moment from 'moment'
import * as Extend from "../../extend";

export interface DateVJsonProp extends FormItemBaseProp<Text> {
    format?: string
    showTime?: boolean | { defaultValue: string }
    showToday?: boolean
    onChange?: YvanEvent<Date>
    onOk?: YvanEvent<Date>
    showNow?: boolean
    picker?: "date" | "week" | "month" | "quarter" | "year"
}

export interface DateState extends FormItemBaseState<Text> {

}

@VJsonComponent({
    view: 'date'
})
export default class Date extends VJsonFormItemBase<Text, DateVJsonProp, DateState> {
    static defaultProps = {
        ...VJsonFormItemBase.defaultProps,
        allowClear: true,
    }

    format: string

    constructor(props: any) {
        super(props, Date.defaultProps)

        switch (this.props.vjson.picker) {
            case 'quarter':
            case 'week':
                this.format = ''
                break

            case 'month':
                this.format = 'YYYY-MM'
                break

            case 'year':
                this.format = 'YYYY'
                break

            default:
                this.format = this.props.vjson.format || 'YYYY-MM-DD'
        }
    }

    protected onValueChange(this: any, e: any) {
        let value: any = ""
        if (e) {
            if (this.props.vjson.picker === 'week') {
                value = moment().format('YYYY') + '-' + e.week() + '周'

            } else if (this.props.vjson.picker === 'quarter') {
                value = moment().format('YYYY') + '-Q' + e.quarter()

            } else {
                value = e.format(this.format)
            }
        }
        this.value = value
        YvanEventDispatch(this.state.onChange, this, {moment: e, value: value})
    }

    /**
     * 从控件值到实体 (control -> entity) 的转换 normalizeToEntity
     */
    normalizeToEntity(value: any) {
        if (typeof value === 'string') {
            return value

        } else if (value && value.isValid && value.isValid()) {
            return value.format(this.format)
        }

        return value
    }

    /**
     * 从实体值到控件 (entity -> control) 的转换 normalizeToEntity
     */
    normalizeToControl(value: any) {
        if (typeof value === 'string' && value) {
            if (this.props.vjson.picker === 'week') {
                const year = parseInt(value.substring(0, 4))
                const week = parseInt(value.substring(5).replace('周', ''))
                value = moment().year(year).week(week)

            } else if (this.props.vjson.picker === 'quarter') {
                const year = parseInt(value.substring(0, 4))
                const q = parseInt(value.substring(6, 7))
                value = moment().year(year).quarter(q)

            } else {
                value = moment(value)
            }
        }

        if (value && value.isValid) {
            if (!value.isValid()) {
                value = moment()
            }
        }
        return value
    }

    protected get _isRootFormItem() {
        return false
    }

    protected renderWrapper(): JSX.Element {
        if (Extend.isDebugMode()) {
            console.log('RenderDate ', this.toString())
        }

        const addonAfter =
            (typeof this.props.vjson.addonAfter === 'undefined')
                ? null
                : (<span className="ant-input-group-addon">
                        {
                            apply(this, this.props.vjson.addonAfter)
                        }
                </span>)

        return (
            <span className="ant-input-group-wrapper">
                <span className="ant-input-wrapper ant-input-group">
                    {/*@ts-ignore*/}
                    <AntdForm.Item noStyle
                                   {...this._getFormItemBindProperty(false)}>
                        <DatePicker key={this.key} view_id={this.key} aria-roledescription={this.view}
                                    picker={apply(this, this.props.vjson.picker)}
                                    disabled={apply(this, this.props.vjson.disabled)}
                                    format={apply(this, this.props.vjson.format)}
                                    defaultValue={apply(this, this.defaultValue)}

                            // @ts-ignore
                                    showTime={apply(this, this.props.vjson.showTime)}
                                    showToday={apply(this, this.props.vjson.showToday)}
                                    onChange={this.onValueChange.bind(this)}
                                    onOk={YvanEventBind(this.props.vjson.onOk, this)}
                                    showNow={apply(this, this.props.vjson.showNow)}
                        />
                    </AntdForm.Item>
                    {
                        addonAfter
                    }
                </span>
            </span>
        )
    }
}
